<template>
  <div class="coupons" style="position: relative;width: 100%;height: 100%; ">
    <div class="cjy-moldeTitle" style="">
      领取优惠券
    </div>
    <div style="height:20rem;padding:2rem  0 3rem 0 ;width: 100% ;position: relative;overflow: hidden">
      <vertical-scroll :lengths="3" ref="translateMain">
        <div style="width: 100%">
          <!--couponListCanBeGet-->
          <ul class="coupon_list" v-if="couponListCanBeGet" style="padding-bottom: 1rem">
            <li v-for="(val,index) in couponListCanBeGet" :key="index" v-if="couponListCanBeGet"
                @click="getConpon(val.couponCode)" :style="{opacity:  isGet(val.couponCode) ? 0.5:1}"
                :class="[{already1:val.state=='不可领'||val.auditorStatus==7||val.auditorStatus==4}]">
              <dl>
                <dt class="spandt">
                	<span class="usePlatspan" :class="useplatcolor(val.usePlatform)">{{useterrace(val.usePlatform)}}</span> 
                	{{val.couponName}}
                </dt>
                <dd class="spandd">{{useRangefn(val.useRange)}}</dd>
                <dd class="spandd" v-if="val.useRestriction==1">满{{val.fullElement}}元使用</dd>
                <!--<dd>使用平台：{{useterrace(val.usePlatform)}}</dd>-->
                <p style="padding: 0px;" v-if="val.auditorStatus==5">活动结束时间：{{val.activityEndTime}}</p>
                <p style="padding: 0px;" v-if="val.auditorStatus==7||val.auditorStatus==4">活动开始时间：{{val.activityStartTime}}</p>
              </dl>
              <div class="account_money"><!--style="vertical-align:unset;"-->
                <div class="moneyclss">
                  <span class="unit" v-if="val.couponAmount">¥</span>
                  <span>{{pricetwo(1,val.couponAmount,val.couponDiscount)}}</span><span class="unit" v-if="val.couponAmount">{{pricetwo(2,val.couponAmount,val.couponDiscount)}}</span>
                  <!--<span>{{val.couponAmount ? val.couponAmount : val.couponDiscount}}</span>-->
                  <span class="unit" v-if="val.couponDiscount">折</span>
                </div>
                <div class="stateclss">
                	{{ isGet(val.couponCode) ? '已领取' : val.auditorStatus == 7 || val.auditorStatus == 4 ? '准备开抢' : '立即领取'}}
                </div>
              </div>
            </li>

            <!---->
            <!--<li v-for="val in couponListCanBeGet">-->
            <!--<dl>-->
            <!--<dt>{{val.couponName}}</dt>-->
            <!--<dd>{{useRangefn(val.useRange)}}</dd>-->
            <!--<dd v-if="val.fullElement">满{{val.fullElement}}元使用</dd>-->
            <!--<p v-if="val.availableEndTime">过期时间：{{val.availableEndTime}}</p>-->
            <!--</dl>-->
            <!--<div class="account_money" @click="getConpon(val.couponCode)">-->
            <!--<div><span class="unit"-->
            <!--v-if="val.couponAmount">¥</span><span>{{val.couponAmount ? val.couponAmount : val.couponDiscount}}</span><span-->
            <!--class="unit" v-if="val.couponDiscount">折</span></div>-->
            <!--</div>-->
            <!---->
            <!--<em v-if="isGet(val.couponCode)"> 可用</em>-->
            <!--<em v-else="" style="color: #f0f22d"> 可领</em>-->
            <!--</li>-->
          </ul>
        </div>

      </vertical-scroll>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import {queryDisount, queryDisountOffLine} from '@/utils/ReturnAxios'
  import VerticalScroll from '@/components/VerticalScroll'
  import {Toast} from '../../utils/toast'
  import { MessageBox } from '@/ui-components';

  export default {
    data() {
      return {
        getList: []
      }
    },
    props: {
      couponListCanBeUsed: {
        type: Array,
        default: () => []
      },
      couponListCanBeGet: {
        type: Array,
        default: () => []
      },
      isOffLine: {
        type: Boolean,
        default: false
      }
    },
    components: {
      VerticalScroll
    },
    methods: {
    	//价格小数点后两位
			pricetwo(num, amount, discount) {
				if(num == 1 && discount) {
					return discount
				} else if(num == 1 && amount) {
					return String(amount).split('.')[0];

				} else if(num == 2 && amount) {
					if(String(amount).split('.')[1]) {
						return "." + String(amount).split('.')[1];
					} else {
						return ""
					}

				}
			},
      //优惠券使用范围
      useRangefn(item){
        if (item == 1) {
          return "商品券"
        } else if (item == 2) {
          return "品类券"
        } else if (item == 3) {
          return "品牌券"
        } else if (item == 4) {
          return "全场券"
        } else if (item == 5) {
          return "品类券"
        }
      },
      //使用平台的获取
			useterrace(item) {
				var arr = item.split(',')
				if(arr.indexOf('wap')>-1 && arr.indexOf('offline')<0){
					return '商城用'
				}else if(arr.indexOf('offline')>-1 && arr.indexOf('wap')<0){
					return '体验中心用'
				}else if(arr.indexOf('wap')>-1 && arr.indexOf('offline')>-1){
					return '商城体验中心通用'
				}
				/*let use1 = item.replace(/WAP/, "wap")
				let use2 = use1.replace(/PC/, "pc")
				let use3 = use2.replace(/offline/, "线下")
				return use3*/
			},
			useplatcolor(item){
				var arr = item.split(',')
				if(arr.indexOf('wap')>-1 && arr.indexOf('offline')<0){
					return 'usePlatspan1'
				}else if(arr.indexOf('offline')>-1 && arr.indexOf('wap')<0){
					return 'usePlatspan2'
				}else if(arr.indexOf('wap')>-1 && arr.indexOf('offline')>-1){
					return 'usePlatspan3'
				}
			},
      refresh() {
        this.$refs.translateMain.refresh()
      },
      async getConpon(data){
      	var sessionId = localStorage.getItem('sessionId');
				if(!sessionId || sessionId == 'undefined') {
					MessageBox('用户未登录账号', '请先登录账号再领取购物券吧').then(
						() => {
							this.$router.push({
								path: 'login',
								query: {
									page: '111'
								}
							})
						}
					)
					return
				}
        var isGet = this.getList.some((item) => {
          return data == item
        })
        if (!isGet) {
          if (this.isOffLine) {
            var res = await queryDisountOffLine(data)
          } else {
            var res = await queryDisount(data)
          }
          res = res.data
          if (res.returnCode == 1) {
            this.getList.push(data)
            this.$emit('refreshData')
            Toast({
              message: '领取成功',
              type: 'success'
            })
          } else {
            Toast({
              message: res.msg,
              type: 'fail'
            })
          }
        }
      },
      isGet (data){
        var isGet = this.getList.some((item) => {
          return data == item
        })
        return isGet
      }

    },
    computed: {
      activeIndex() {
        return this.$store.state.cjy.classifyIndex
      },

    },
    watch: {
      couponListCanBeUsed(data) {
        this.getList = []
      },
      couponListCanBeGet(data) {
        this.getList = []
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.refresh()
      })
//      this.querymyCoupons()
    },
    watch: {
      couponListCanBeUsed(data) {
        this.getList = []
      },
      couponListCanBeGet(data) {
        this.getList = []
      }
    },
  }
</script>

<style>
  .coupons .overhid {
    overflow: hidden;
  }

  .coupons .coupon_list li {
    background: #fff;
    border: none;
    height: 4rem;
  }

  .coupons .coupon_list li dl {
    text-align: left;
    white-space: normal;
  }

  .coupons .coupon_list li dl dd {
    font-size: 0.5rem;
    padding: 0.1rem 0.2rem;
		border: 1px solid #d7d7d7;
		color: #666;
  }

  .coupons .coupon_list li dl p {
    /*padding: 0rem;
    line-height: 1rem;*/
   font-size: 0.6rem;
   line-height: 0.6rem;
	 height: 0.6rem;
	 margin-bottom: 0.2rem;
  }

  .coupons .coupon_list li::after,
  .coupons .coupon_list li::before {
    background: none;
    border-left: none;
    border-bottom: none;
    border-radius: none;
  }

  .coupons .coupon_list li .account_money .unit {
    font-size: 0.8rem;
  }

  .coupons .coupon_list li .account_money {
    background: url(../../../static/image/myCoupon1.png) repeat-y right;
    background-size: contain;
    height: 4rem;
    color: #fff;
    border: none;
    /*display: inline-block;*/
    /*margin: 0rem;*/
  }

  .coupons .coupon_list li .account_money .moneyclss {
    height: 1rem;
  }

  .coupons .coupon_list li .stateclss {
    /*height: 1rem;*/
    /*display: inline-block;
    color: #fff;*/
  }

  .coupons .coupon_list li .account_money span {
    font-size: 1rem;
    display: inline-block;
  }

  .coupons .coupon_list li dl dt {
    font-weight: normal !important;
    /*width: 10rem;*/
   padding-right: 0.2rem;
    line-height: 1rem;
		font-size: 0.7rem;
		margin-top: 0.2rem;
    /*overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;*/
   
  }

  /*.coupons .coupon_list li.already1 .account_money {
    background: url(../../../static/image/myCoupon3.png) no-repeat right;
    background-size: contain;
  }

  .coupons .coupon_list li.use .account_money {
    background: url(../../../static/image/myCoupon2.png) no-repeat right;
    background-size: contain;
  }*/

  .coupons .coupon_list li.already1,
  .coupons .coupon_list li.use {
    opacity: 0.5;
  }

  .coupons .coupon_list li.already1 .account_money {
    background: url(../../../static/image/myCoupon3.png) repeat-y right;
    background-size: contain;
    color: #fff;
  }

  .coupons .coupon_list li.use .account_money {
    background: url(../../../static/image/myCoupon1.png) repeat-y right;
    background-size: contain;
    color: #fff;
  }

  .coupons .coupon_list li.already1 dd {
    color: #a0a0a0;
    border: 1px solid #a0a0a0;
  }

  .cjy-moldeTitle {
    text-align: center;
    vertical-align: middle;
    height: 2.2rem;
    line-height: 2.2rem;
    border-bottom: 1px solid gainsboro;
    position: absolute;
    width: 100%;
    z-index: 100;
    background: white;
    font-weight: 800;
    font-size: 0.75rem;
  }
  .coupons .usePlatspan{
		display: inline-block;
		font-size: 0.6rem;
		line-height: 1rem;
		padding:0rem 0.25rem;
		border-radius: 0.5rem;
		/*background-color: #FF9933;商城用
		background-color: #9FD959;体验中心用
		background-color: #EF5423; 商城体验中心通用*/
	}
	.usePlatspan1{
		color: #38B035;
		background-color:rgba(56,176,53,0.1);/*商城用*/
	}
	.usePlatspan2{
		color: #FFCC00;
		background-color: rgba(255,204,0,0.1);/*体验中心用*/
	}
	.usePlatspan3{
		color: #FF6600;
		background-color: rgba(255,102,0,0.1);/*商城体验中心通用*/
	}
	
</style>

